<!DOCTYPE html>
<!-- 文档类型声明，说明这个文档是一个html5格式的文档  -->
<html>
	<!-- 头部 -->

	<head>
		<!-- 页面编码集    utf（unicode transformation format）-8: 一个汉字三个字节编码
		GBK即“国标”、“扩展”汉语拼音的第一个字母，英文名称：Chinese Internal Code Specification）		
		GBK(21886)或GB2312(6763): 一个汉字两个字节编码  -->
		<meta charset="utf-8" />

		<!-- 定义页面的标题 -->
		<title>源辰-零食网</title>

		<!-- 定义页面logo  ref：reference 参照、引用   			
			rel:relationship的缩写 ，引用的这个外部资源跟这个页面的关系 -->
		<link href="images/yc.png" type="image/x-icon" rel="shortcut icon" />

		<!-- 引入外部样式表  -->
		<link href="css/index.css" type="text/css" rel="stylesheet" />
	</head>

	<!-- 身体部分，真正的页面内容部分，这里面的内容会在浏览器中显示 -->

	<body>
		<!-- 页面顶部部分 -->
		<header id="header">
			<div class="htitle">
				<!-- href:点击后要跳转的页面地址
					title: 鼠标移上去的时候显示的提示信息
					target: 新页面的打开位置
				-->
				<a href="#" title="位置" target="_blank" class="location">衡阳</a>

				<div class="header_info">
					<!-- 登录信息 -->
					<div class="login_info">
						<a href="login.html" title="点击登录">您好，请先登录</a>
						<a href="register.html" title="点击注册">免费注册</a>
					</div>

					<!-- 个人信息 -->
					<div class="person_info">
						<span>|</span>
						<a href="order.html" target="_blank" title="历史订单">我的订单</a>
						<span>|</span>
						<a href="" target="_blank">我的小吃</a>
						<span>|</span>
						<a href="" target="_blank">客服服务</a>
						<span>|</span>
						<a href="" target="_blank">个人中心</a>
					</div>
				</div>
			</div>

			<!-- 搜索区域 -->
			<div class="search">
				<!-- 搜索区域左边的logo部分  -->
				<div class="search_left">
					<a href="index.html" title="首页">
						<img src="images/logo.png" width="260px" height="90px" />
					</a>
				</div>

				<div class="search_right">
					<!-- 搜索框和我的购物车部分 -->
					<div class="search_top">
						<div class="search_div">
							<input type="search" class="search_ipt" name="key" placeholder="请输入要搜索的内容" />
							<input type="button" class="search_btn" value="搜索" />
						</div>

						<div class="buycat">
							<b>12</b>
							<a href="#" target="_blank">我的购物车</a>
						</div>
					</div>

					<!-- 商品类型导航 -->
					<div class="search_bottom">
						<a href="#" class="selected">全部</a>
						<a href="#" v-for="item in types">{{item.tname}}</a>
					</div>
				</div>
			</div>
		</header>
		<!-- 顶部下面的轮播图部分 -->
		<div class="slide" id="slide">
			<img src="images/slide01.jpg" />
			<img src="images/slide02.jpg" />
			<img src="images/slide03.jpg" />
			<img src="images/slide04.jpg" />
			<img src="images/slide05.jpg" />
		</div>

		<!-- 中间内容区 -->
		<article id="add">
			<div class="view_title">
				<a href="#">价格</a>
				<input type="number" class="price_ipt" min="1" />
				<span>-</span>
				<input type="number" class="price_ipt" min="1" />
			</div>
			
			<div class="view_items">
				<ul>
					<li v-for="item in products">
						<a href="detail.html" target="_blank">
							<img :src="'../' + item.pic" title="开心果" />
							<span>{{item.gname}}</span>
						</a>
						<div>
							<span>&yen;{{item.price}}</span>
							<span> / {{item.weight}}</span>
							<span class="buy"></span>
						</div>
					</li>
				</ul>
			</div>
			
			<div class="page_info">
				<a href="javascript:void(0)" @click="findByPage(item, $event)" :class="{active :item == 1}" v-for="item in totalPage">{{item}}</a>
			</div>
		</article>

		<!-- 底部版权区 -->
		<footer>
			<div class="foot_link">
				<a href="">关于我们</a><span>|</span>
				<a href="">联系我们</a><span>|</span>
				<a href="">招聘广告</a><span>|</span>
				<a href="">友情链接</a><span>|</span>
				<a href="">公司介绍</a>
			</div>
			<p>CopyRight &copy; 2022 <a class="copy" href="http://www.hyycinfo.com" target="_blank">
				衡阳市源辰信息科技有限公司</a> All Rights Reserverd</p>
			<p>电话：0737-8355998 湘ICP备2022454545号-1</p>
		</footer>
	</body>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script>
window.onload = function() { // 当页面加载完成执行这个函数
	var imgs = document.getElementById("slide").getElementsByTagName("img"); // 获取所有的轮播图片，返回的是一个数组
	var len = imgs.length; // 获取图片的数量
	var index = 0; // 记录当前显示的是第几张图片
	setInterval(function() { // 设置一个定时器，每隔2000毫秒执行函数一次
		index = ++ index % len;
		for (var i = 0; i < len; ++ i) {
			if (i == index) {
				imgs[i].style.display = "block"; // 显示
			} else {
				imgs[i].style.display = "none"; // 不显示
			}
		}
	}, 2000);
}

let header = new Vue({
	el: "#header",
	data: {
		types: []	//存放从服务器端获取到的类型信息
	},
	mounted: function() {
		//发送请求获取数据类型信息
		axios.get("type/findAll").then(rt => {
			// rt.status说明请求发送成功， rt,data.code == 200 说明后台数据回送成功
			if(rt.status == 200 && rt.data.code == 200){
				this.types = rt.data.data;
				return;
			}
		})
	}
})

let page = 1;
let rows = 2;
let add = new Vue({
	el: "#add",
	data: {
		total: 0,
		totalPage: 1,	// 总页数
		products: [] // 存放从服务器端获取到的类型信息
	},
	mounted: function(){
		// 发送请求获取类型数据
		axios.post("product/findFirst", qs.stringify({page: page, rows: rows})).then(rt => {
			// rt.status说明请求发送成功， rt,data.code == 200 说明后台数据回送成功
			if(rt.status == 200 && rt.data.code == 200){
				this.products = rt.data.data.rows;
				this.total = rt.data.data.total;
				this.totalPage = Math.ceil(this.total / rows);
				return;
			}
		})
	},
	methods: {
		findByPage: function(index, obj){
			page = index;
			$("#page_info>a").removeClass("active");	//先移除a分页标签上的类样式
			$(obj.currentTarget).addClass("active");
			
			//分页查询
			axios.post("product/finds", qs.stringify({page: page, rows: rows})).then(rt => {
				if(rt.status == 200 && rt.data.code == 200){
					this.products = rt.data.data;
					retuen;
				}
			})
		}
	}
})
</script>
</html>